//品名状态---有效
var state_valid = "1";
//品名状态---无效
var state_invalid = "0";
//默认图片名称
var default_pic = "2.png";
// 默认图片大小
var default_pic_size = "2.png";
// 默认图片编号
var default_pic_num = "1";

$(function () {
    //1.初始化Table
    var oTable = new TableInit();
    oTable.Init();

    //2.初始化fileinput
    var addFileInput = new FileInput("add_pic");
    var modifyFileInput = new FileInput("modify_pic");
    addFileInput.Init();
    modifyFileInput.Init();

    //3.初始化Button的点击事件
    var oButtonInit = new ButtonInit(addFileInput, modifyFileInput);
    oButtonInit.Init();
});

var TableInit = function () {
    var oTableInit = new Object();
    //初始化Table
    oTableInit.Init = function () {
        $('#tb_table_list').bootstrapTable("destroy");
        $('#tb_table_list').bootstrapTable({
            url: 'itemTypeController/showItemTypeList',         //请求后台的URL（*）
            method: 'get',                                      //请求方式（*）
            toolbar: '#toolbar',                                //工具按钮用哪个容器
            striped: true,                                      //是否显示行间隔色
            cache: false,                                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
            pagination: true,                                   //是否显示分页（*）
            sortable: false,                                    //是否启用排序
            sortOrder: "asc",                                   //排序方式
            queryParams: oTableInit.queryParams,                //传递参数（*）
            sidePagination: "server",                           //分页方式：client客户端分页，server服务端分页（*）
            queryParamsType: "undefined",                       //设置为undefined可以获取pageNumber，pageSize，searchText，sortName，sortOrder
                                                                //设置为limit可以获取limit, offset, search, sort, order
            pageNumber: 1,                                      //初始化加载第一页，默认第一页
            pageSize: 10,                                       //每页的记录行数（*）
            pageList: [10],                                     //可供选择的每页的行数（*）
            search: false,                                      //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
            strictSearch: true,
            showColumns: false,                                 //是否显示所有的列
            showRefresh: false,                                 //是否显示刷新按钮
            minimumCountColumns: 2,                             //最少允许的列数
            clickToSelect: true,                                //是否启用点击选中行
            height: 550,                                        //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
            uniqueId: "ID",                                     //每一行的唯一标识，一般为主键列
            showToggle: false,                                  //是否显示详细视图和列表视图的切换按钮
            cardView: false,                                    //是否显示详细视图
            detailView: false,                                  //是否显示父子表
            columns: [{
                checkbox: true,
                align: 'center'
            }, {
                field: 'subjectName',
                title: '科目',
                align: "center"
            }, {
                field: 'itemName',
                title: '品名',
                align: "center"
            }, {
                field: 'metric',
                title: '单位',
                align: "center"
            }, {
                field: 'quantity',
                title: '数量',
                align: "center"
            }, {
                field: 'price',
                title: '单价',
                align: "center"
            }, {
                field: 'itemNum',
                title: '货号',
                align: "center"
            }],
            //双击列表行打开查看详细页面
            onDblClickRow: function (row, $element, field) {
                $.post("itemTypeController/showItemType", {id: row.id}, function (data) {
                    $("#showModalLabel").text("查看物品类型信息");
                    $("#show_subjectName").val(data["itemType"].subjectName);
                    $("#show_itemName").val(data["itemType"].itemName);
                    $("#show_metric").val(data["itemType"].metric);
                    $("#show_quantity").val(data["itemType"].quantity);
                    $("#show_price").val(data["itemType"].price);
                    $("#show_remark").val(data["itemType"].remark);
                    $("#show_itemNum").val(data["itemType"].itemNum);
                    var requestURL = data["requestURL"];
                    var picName = data["itemType"].picName;
                    if (picName != null && picName != "" && picName != "null") {
                        $("#show_pic").attr("src", requestURL + data["itemType"].url);
                        $("#picHref").attr("href", requestURL + data["itemType"].url);
                    } else {
                        //无图片时显示默认的图片
                        $("#show_pic").attr("src", requestURL + "upload/" + default_pic);
                        $("#picHref").attr("href", requestURL + "upload/" + default_pic);
                    }

                    $('#showPage').modal();
                });
            }
        });
    };

    //得到查询的参数
    oTableInit.queryParams = function (params) {
        return {                        //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
            currentPage: params.pageNumber,
            PAGE_SIZE: params.pageSize,
            subjectName: $("#search_subjectName").val(),
            itemName: $("#search_itemName").val()
        };
    };
    return oTableInit;
};


var ButtonInit = function (addFileInput, modifyFileInput) {
    var oInit = new Object();

    oInit.Init = function () {
        <!-- =============================列表查询和重置开始=============================-->
        //列表页面查询
        $("#btn_query").click(function () {
            var oTable = new TableInit();
            oTable.Init();
        });

        //清空查询框内容
        $("#btn_resert").click(function () {
            $("#search_subjectName").val("");
            $("#search_itemName").val("");
        });
        <!-- =============================列表查询和重置结束=============================-->

        <!-- =============================数据添加、修改开始=============================-->
        //列表页面添加
        $("#btn_add").click(function () {
            $("#addModalLabel").text("新增物品类型信息");
            $.post("itemTypeController/selectSubject", {state: state_valid}, function (data) {
                var subject_name_option = new Array();
                $("#add_subjectName").empty();
                $.each(data["subject"], function (i, item) {
                    subject_name_option[i] = "<option value='" + item["id"] + "'>" + item["subjectName"] + "</option>";
                });
                subject_name_option.unshift("<option value='" + "" + "'>" + "请选择科目" + "</option>");
                $('#add_subjectName').html(subject_name_option.join(''));
                $('#addPage').modal();
            });
        });

        //列表页面修改
        $("#btn_edit").click(function () {
            var selectors = $.map($("#tb_table_list").bootstrapTable('getSelections'), function (row) {
                return row.id;
            });
            if (selectors.length == 0) {
                alert("请选择您要修改的物品类型!");
                return;
            } else if (selectors.length > 1) {
                alert("请您选择一项物品类型进行修改!");
                return;
            } else {
                var subjectId;
                $.post("itemTypeController/showItemType", {id: selectors.toString()}, function (data) {
                    $("#modifyModalLabel").text("修改物品类型信息");
                    subjectId = data["itemType"].subjectId;
                    $("#id").val(data["itemType"].id);
                    $("#modify_itemName").val(data["itemType"].itemName);
                    $("#modify_metric").val(data["itemType"].metric);
                    $("#modify_quantity").val(data["itemType"].quantity);
                    $("#modify_price").val(data["itemType"].price);
                    $("#modify_remark").val(data["itemType"].remark);
                    $("#modify_itemNum").val(data["itemType"].itemNum);

                    var requestURL = data["requestURL"];
                    var picName = data["itemType"].picName;
                    var src, picSize, picAlias, num, picId;
                    if (picName != null && picName != "" && picName != "null") {
                        src = requestURL + data["itemType"].url;
                        $("#picId").val(data["itemType"].picId);
                        $("#modify_source_picName").val(data["itemType"].picAlias);
                        $("#fileSize").val(data["itemType"].fileSize);
                    } else {
                        src = requestURL + "upload/" + default_pic;
                        $("#picId").val("");
                        $("#modify_source_picName").val("");
                        $("#fileSize").val("");
                    }
                    $("#modify_showPic").attr("src", src);

                    $.post("itemTypeController/selectSubject", {state: ''}, function (data) {
                        var subject_name_option = new Array();
                        $("#modify_subjectName").empty();
                        $.each(data["subject"], function (i, item) {
                            subject_name_option[i] = "<option value='" + item["id"] + "'>" + item["subjectName"] + "</option>";
                        });
                        subject_name_option.unshift("<option value='" + "" + "'>" + "请选择科目" + "</option>");
                        $('#modify_subjectName').html(subject_name_option.join(''));
                        $('#modify_subjectName').val(subjectId);
                    });
                });
                $('#modifyPage').modal();
            }
        });
        <!-- =============================数据添加、修改结束=============================-->

        <!-- =============================新增开始=============================-->
        //添加页面保存按钮
        $("#btn_addSubmit").click(function () {
            var formData = new FormData();
            formData.append('file', $('#add_pic')[0].files[0]);
            formData.append('subjectId', $("#add_subjectName").val());
            formData.append('itemName', $("#add_itemName").val().trim());
            formData.append('metric', $("#add_metric").val().trim());
            formData.append('quantity', $("#add_quantity").val().trim());
            formData.append('price', $("#add_price").val().trim());
            formData.append('remark', $("#add_remark").val().trim());
            formData.append('itemNum', $("#add_itemNum").val().trim());
            formData.append('fileSize', $('#fileSize').val());

            $('#add-form').bootstrapValidator('validate');
            var bootstrapValidator = $('#add-form').data('bootstrapValidator');
            //表单验证通过
            if (bootstrapValidator.isValid()) {
                $.ajax({
                    url: 'itemTypeController/addItemType',
                    type: 'POST',
                    data: formData,
                    cache: false,
                    contentType: false,
                    processData: false,
                    success: function (data) {
                        //隐藏弹出添加页面
                        $("#addPage").modal("hide");
                        $("#add-form").bootstrapValidator('resetForm', true);
                        addFileInput.reset();
                        var oTable = new TableInit();
                        oTable.Init();
                    },
                    error: function (data) {
                        //隐藏弹出添加页面
                        $("#addPage").modal("hide");
                        $("#add-form").bootstrapValidator('resetForm', true);
                        addFileInput.reset();
                        var oTable = new TableInit();
                        oTable.Init();
                    }
                });
            }
        });

        //添加页面关闭按钮
        $('#btn_addClose').click(function () {
            $("#addPage").modal("hide");
            $("#add-form").bootstrapValidator('resetForm', true);
            addFileInput.reset();
        });
        <!-- =============================新增结束=============================-->

        <!-- =============================修改开始=============================-->
        //修改页面保存按钮
        $("#btn_modifySubmit").click(function () {
            var formData = new FormData();
            formData.append('file', $('#modify_pic')[0].files[0]);
            formData.append('id', $('#id').val());
            formData.append('subjectId', $("#modify_subjectName").val());
            formData.append('itemName', $("#modify_itemName").val().trim());
            formData.append('metric', $("#modify_metric").val().trim());
            formData.append('quantity', $("#modify_quantity").val().trim());
            formData.append('price', $("#modify_price").val().trim());
            formData.append('remark', $("#modify_remark").val().trim());
            formData.append('itemNum', $("#modify_itemNum").val().trim());
            formData.append('fileSize', $('#fileSize').val());
            formData.append('picId', $('#picId').val());
            formData.append('sourcePicName', $('#modify_source_picName').val());
            formData.append('uploadTag', $('#uploadTag').val());


            $('#modify-form').bootstrapValidator('validate');
            var bootstrapValidator = $('#modify-form').data('bootstrapValidator');
            //表单验证通过
            if (bootstrapValidator.isValid()) {
                $.ajax({
                    url: 'itemTypeController/updateItemType',
                    type: 'POST',
                    data: formData,
                    cache: false,
                    contentType: false,
                    processData: false,
                    success: function (data) {
                        //隐藏弹出添加页面
                        $("#modifyPage").modal("hide");
                        $("#modify-form").bootstrapValidator('resetForm', true);
                        $('#fileSize').val("");
                        $('#id').val("");
                        $('#picId').val("");
                        $('#uploadTag').val("");
                        modifyFileInput.reset();
                        var oTable = new TableInit();
                        oTable.Init();
                    },
                    error: function (data) {
                        //隐藏弹出添加页面
                        $("#modifyPage").modal("hide");
                        $("#modify-form").bootstrapValidator('resetForm', true);
                        $('#fileSize').val("");
                        $('#id').val("");
                        $('#picId').val("");
                        $('#uploadTag').val("");
                        modifyFileInput.reset();
                        var oTable = new TableInit();
                        oTable.Init();
                    }
                });
            }
        });

        //修改页面关闭按钮
        $('#btn_modifyClose').click(function () {
            $("#modifyPage").modal("hide");
            $("#modify-form").bootstrapValidator('resetForm', true);
            $('#fileSize').val("");
            $('#id').val("");
            $('#picId').val("");
            $('#uploadTag').val("");
            modifyFileInput.reset();
        });
        <!-- =============================修改结束=============================-->

        <!-- =============================查看开始=============================-->
        //查看页面关闭按钮
        $('#btn_showClose').click(function () {
            $("#showPage").modal("hide");
        });
        <!-- =============================查看结束=============================-->

        <!-- =============================退出登录开始=============================-->
        $("#logout-button").click(function () {
            $.post("loginController/loginOut", {}, function (data) {
                window.location.href = "login.html";
            });
        });
        <!-- =============================退出登录结束=============================-->
    };
    return oInit;
};

<!-- =============================文件上传开始=============================-->
//初始化fileinput
var FileInput = function (ctrlName) {
    var oFile = new Object();
    var control = $('#' + ctrlName);
    //初始化fileinput控件（第一次初始化）
    oFile.Init = function () {
        //初始化上传控件的样式
        control.fileinput({
            language: 'zh',                                     //设置语言
            uploadUrl: "#",                                     //上传的地址
            allowedFileExtensions: ['jpg', 'gif', 'png'],       //接收的文件后缀
            showUpload: false,                                  //是否显示上传按钮
            showCaption: false,                                 //是否显示标题
            browseClass: "btn btn-primary",                     //按钮样式
            dropZoneEnabled: false,                             //是否显示拖拽区域
            maxFileSize: 1024,                                   //单位为kb，如果为0表示不限制文件大小
            maxFileCount: 1,                                    //表示允许同时上传的最大文件个数
            validateInitialCount: true,
            previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
            msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",
            layoutTemplates: {
                actionDelete: '',
                actionUpload: ''
            },
            overwriteInitial: false,
            append: false,
            initialPreview: [],
            initialPreviewAsData: true,
            deleteUrl: "#",
            initialPreviewConfig: []
        }).on("filebatchselected", function (event, files) {
            // 保存当前上传文件的大小
            $("#fileSize").val(files[0].size);
            // 设置上传标志，当为1时表示本次操作上传了新的图片
            $("#uploadTag").val("1");
        }).on('fileclear', function (event) {
            // 删除时将上传文件大小置空
            $("#fileSize").val("");
            // 删除时将上传标志置空
            $("#uploadTag").val("");
        });
        ;
    };

    oFile.reset = function () {
        control.fileinput('reset');
    };

    oFile.destroy = function () {
        control.fileinput('destroy');
    };

    oFile.refresh = function (initialPreview, initialPreviewConfig) {
        control.fileinput('refresh', {
            initialPreview: initialPreview,
            initialPreviewConfig: initialPreviewConfig,
            showDelete: true
        });
    };
    return oFile;
};
<!-- =============================文件上传结束=============================-->